<script>
// import { json } from "body-parser";
import { mapActions, mapGetters } from "vuex";
import { register, login } from "../api/serve";
export default {
  name: "myLogin",
  data() {
    var repassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else if (this.ruleForm.password !== this.ruleForm.repassword) {
        return callback(new Error("两次输入的密码不一致请再次输入"));
      } else {
        return callback();
      }
    };
    var password = (rule, value, callback) => {
      const regs = /\w{4,8}/;
      console.log(regs.test(value));
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!regs.test(value)) {
        console.log(regs.test(value));
        return callback(new Error("请输入4到五位的数字字母下划线密码"));
        // this.$refs.ruleForm.validateField("checkPass");
      } else {
        return callback();
      }
    };
    var email = (rule, value, callback) => {
      const reg = /.+@.+\..+/;
      if (!value) {
        return callback(new Error("邮箱"));
      } else if (!reg.test(value)) {
        // 看其输入的是否符合邮箱格式的规范
        return callback(new Error("请输入正确的邮箱格式"));
      } else {
        return callback();
      }
    };
    return {
      showregister: false,
      isLogin: false,
      ruleForm: {
        password: "",
        repassword: "",
        email: "",
      },
      rules: {
        password: [{ validator: password, trigger: "blur" }],
        repassword: [{ validator: repassword, trigger: "blur" }],
        email: [{ validator: email, trigger: "blur" }],
      },
    };
  },
  watch: {
    getshowloginbtn: function (value) {
      if (value === true) {
        this.$router.push("/");
      }
    },
    getShowlogin: function (value) {
      console.log(value);
      this.isLogin = this.getShowlogin;
    },
    isLogin: function (value) {
      if (this.$refs["ruleForm"]) {
        this.$refs["ruleForm"].resetFields();
      }
      this.setshowlogin(value);
    },
  },
  computed: {
    ...mapGetters("user", ["getShowlogin", "getUser", "getshowloginbtn"]),
  },
  methods: {
    ...mapActions("user", ["setshowlogin", "setuser", "setshowloginbtn"]),
    submitForm() {
      this.$refs["ruleForm"].validate((value) => {
        if (value) {
          if (this.showregister) {
            register(
              {
                email: this.ruleForm.email,
                password: this.ruleForm.password,
              },
              (res) => {
                if (res.success) {
                  // this.isLogin = false;
                  this.$notify({
                    title: "成功",
                    message: "注册成功",
                    type: "success",
                  });
                  return;
                }
                this.$notify({
                  title: "失败",
                  message: res.msg,
                  type: "error",
                });
              }
            );
          } else {
            login(
              {
                email: this.ruleForm.email,
                password: this.ruleForm.password,
              },
              (res) => {
                if (res.success) {
                  const user = res.data[0];
                  localStorage.setItem("token", JSON.stringify(res.token));
                  localStorage.setItem("user", JSON.stringify(user));
                  this.setshowloginbtn(false);
                  this.setuser(user);
                  this.isLogin = false;
                  this.$refs["ruleForm"].resetFields();
                  this.$notify({
                    title: "成功",
                    message: "登录成功",
                    type: "success",
                  });
                } else {
                  this.$refs["ruleForm"].resetFields();
                  this.$notify({
                    title: "失败",
                    message: "账号或密码错误，请检查",
                    type: "error",
                  });
                }
              }
            );
          }
        }
      });
    },
    isRegister() {
      if (this.showregister == false) {
        this.showregister = true;
      } else {
        this.showregister = false;
      }
    },
  },
};
</script>
<template>
  <div class="login_con">
    <el-dialog title="登录" center="center" :visible.sync="isLogin" width="30%">
      <el-form
        size="15"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="email">
          <el-input
            type="text"
            v-model="ruleForm.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input> </el-form-item
        ><el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword" v-if="showregister == true">
          <el-input
            type="password"
            v-model="ruleForm.repassword"
            autocomplete="off"
            placeholder="请在次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">
            {{ showregister === true ? "注册" : "登录" }}
          </el-button>
        </el-form-item>
        <div class="nopassword" @click="isRegister">
          {{ showregister === true ? "已有密码" : "没有密码" }}
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.nopassword {
  color: #333;
  cursor: pointer;
  // margin-top: 5px;
}
</style>
